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Chapter 1 



The Basics 



So you want to learn to program? Great! Lets get you started! 
You will need: 

1. Working computer. 

2. An internet connection (ok, since you are reading this you probably already have the first two) 

3. The Processing programming environment. This, like many programming tools are available free of 
charge. Simply visit http://processing.org and click the download link for Mac or PC (yes, it runs 
great on both. Linux too!) 

Downloaded and installed the program yet? Great! lets get started! 

1.1 Your first Processing sketch. . . 

Once you run Processing, your first program will look something like the image below. Processing is its 
own IDE, or Integraded Development Enviornment. That means all the details are taken care of for us 
and we can simply focus on writing code. 

The code you write will go in the white space in the window. Simply click the play button to run your 
code. The computer will follow your instructions in order from top to bottom. 

Try typing in the following, and click the Play button: 

ellipse(10,10,20,20); 

What you should see is a simple sketch that looks something like this: 
A few things to note here: 

• The parameters, (or the numbers you put between the parenthesis) of the ellipse, are the x, y, 
width, and height of the ellipse. In that order. If you flip the order of the numbers, you will get a 
different circle. Or maybe not even a circle. 

• The origin (0,0) is at the top of the screen, not the bottom. Your y coordinate will be larger the 
further down the screen it gets. 
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ellipse(10,10,20,20) ; 





Figure 1.1 
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Great job on your first sketch! Now on to bigger and better things - more ellipses! To put in another 
ellipse, simply add another line of code. Processing will keep following your instructions step by step, in 
the order you write them. 

ellipse(10, 10,20, 20); 

ellipse(20,10,20,20); 

This works with other things beside ellipses. You can draw rectangles like this: 

rect(10,10,20,20); 
You can draw lines like this: 

line(0,50,50,50); 

For lines, the first two numbers are the x and y coordinates of the first point, and the second two numbers 
are the second point. 

Now that we have all this stuff to draw with, the screen is starting to feel really small. Lets make it bigger. 
Making the sketch bigger is simple, you just type: 

size(600,400); 

This code sets the width and height of a sketch. Again, in that order. Try it out on your own to test how 
this works. Now we will have more room to put on lots of circles! 



1.2 Practice Questions 



1. What are the coordinates of the top right hand corner of the sketch? 

2. What are the coordinates of the bottom left hand corner of a sketch? 

3. How wide is a sketch after you write: size(400,300); 

4. What are the last two numbers of a rect? 

Stroke, Fill, and Color 

Its time to drop some color into your drawings now. We have two options for color on the objects we draw, 
the fill and the stroke. Fill refers to what's inside the object, stroke, the line around the outside. We have 
to input color values into stroke and fill to indicate what color we want. 

A Word on Color 

To a computer, everything is a number. Music, letters, words, and even color is reduced to numbers. 
If you have ever worked with Photoshop, or messed around with website design, you may have heard of 
RGB color. RGB color is a way of breaking down light into component colors, by which we can make any 
individual color we want. For example, if you wanted something really RED. If you wanted to paint your 
ellipse the deepest, most intense red possible, you would put in an RGB value of 255,0,0. This means: 
"LOTS OF RED! . . .but not really any green or blue." Try this out yourself with the practice problems 
below 
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fiLL(0,255,e); 
eLLipse(lB,10,20,20); 

fiLL(0,255,255); 
stroke(255,0,0); 
eLLip3e(30,30,20,20); 
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Figure 1.2 



1.3 Some Practice Programs 

• Make six sketches, one for each side of a dice 

• Make a grid for tic-tac-toe using lines 

• Make the Olympic rings 

• Make a drawing of a certain famous mouse 

• Make a picture, using the ellipse, rect, line, and point functions. 
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Chapter 2 
Variables and Loops 



2.1 Variables 

While we can tell Processing to draw an ellipse at a specific location by inputting regular numbers, things 
really start to get interesting when we add in variables. Most programming books describe variables like 
a cup. They are built to hold stuff, like numbers, letters, words, or delicious coffee. . . mmmm. . . coffee. 
. . Here are some things to remember about variables: 




Figure 2.1 



Variables have a name - like 'x', or 'grade', or 'numberOfCats', or 'nameOflmaginaryFriend'. Really 

good programmers use descriptive variable names that say what the variable is meant to do. Calling 

a variable 'number' or 'value' can be really confusing when you are reading code and trying to figure 

out what it is supposed to do. 

Variables have a type - like a number, letter, word, or lots of other things. A variable built to hold 

a number can't hold a word. Doesn't work. EPIC FAIL. It makes sense really. Like when someone 

puts salt in the sugar bowl. It is always important to know what kind of thing you are dealing with 

when using variables. 

The value of a variable can change (or vary) . 



Here is an example in code: 



int x 



50; 
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ellipse(x,50,10,10); 

Like we said, you can think of a variable like a cup. In this case the label on the cup is 'X' and it holds 
the value 15. This cup is meant to only hold integers, and your program wouldn't run if you tried to store 
a letter in the variable 'X'. 

That is all good and fine, but serves no real purpose on its own. Variables are usually used in combination 
with other techniques, including. . . 



2.2 Loops 



Perhaps the best thing about computers is that they can do simple repetitive tasks very quickly. Under- 
standing how to use loops effectively is one of the best tools in a programmers toolkit. The first loop to 
learn is called the 'while' loop. Here is an example: 



int x = 0; 
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Figure 2.2: The while loop 



while(x < 100) { 

ellipse(x,50,10,10); 



x = x + 10; 



} 



The basic idea here is that as long as x is less than 100, your program will draw a circle at the coordinates 
x, 50. Since x keeps getting bigger, the end result will be 10 circles across the middle of the screen. Here 
are some things to note about while loops: 

• This loop executes continuously until the conditions inside the parenthesis are no longer true. 

• The brackets { } group together a section of code that runs each time through the loop. 

• The last line of code causes X to get bigger each time through the loop. 
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2.3 Review Questions 

Take a look at the code above, and ask yourself the following questions: 

1 . What will the coordinates of the last ellipse be? 

2. What will the value of x be when this code is done executing? 

3. What would happen if you left out the last line of code? 

2.4 Practice Programs 

1. Draw a line of circles from the top of the screen to the bottom. 

2. Draw a series of rectangles that start out big and get smaller and smaller. Your goal is something 
like the image shown. 




Figure 2.3 
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Chapter 3 



Functions 



3.1 On Functions 

We use functions all the time in writing programs. You have already used a few and didn't know it. These 
functions are built into Processing and do special things. In this unit, though, we are going to learn how 
to build our own functions, and see what they can be used for. 

A function is a small group of re-useable code. They help us in quite a few ways: 

• Make our programs more readable. 

• Allow us to write code once, and use it many times. 

• Do repetitive tasks 

Here are some important things to remember about functions: 

• Functions have a name. Preferably a descriptive name that tells you what they do, like 'fetchMyS- 
lippersQ', or 'doMyEnglishHomeworkQ'. 

• Functions give and take. To put this another way, they have parameters and a return type. 

• The keyword return tells your function to stop what it is doing and hand back something for the 
next step of the program. 

• If a function has a return type of void it simply means that your program isn't going to hand back 
anything when it is done. It just finishes on its own. 

• You can often tell something is a function because it is followed by these guys: () 

Built in Functions 

In the example below, the built in keyPressed function is used to move the ball whenever you press the 
'a' or 'd' keys on the keyboard. The word void tells Processing that when the function is done there there 
isn't anything to give back. We will see more on this later. 

If you were paying attention, by now you might have realized that draw and setup are also special built 
in functions. They each have an important role for every sketch that moves. 

The setup function: 

• Only runs once, at the beginning of your code. 
www.ckl2.org 8 
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Figure 3.1 



• Handles things like setting the size, organizing variables, and other stuff we will learn about soon. 
The draw function: 

• Runs many times a second (30 times by default. . . ) 

• Anything you actually want your program to do usually goes in here. 

Building Your Own 

Often you will want to build your own functions to simplify code, or do repetitive tasks. The code below 
is a classic example of a function you might make on your own. 

void setup (){ 
size(400,400); 

} 

void draw(){ 

drawThreeCircles(100,200); 

drawThreeCircles(200,200); 

drawThreeCircles(300,200); 

) 

void drawThreeCircles(int x, int y){ 

ellipse(x,y,30,30); 

ellipse(x,y,20,20); 

ellipse(x,y,10,10); 

} 
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You say 'Jump', and it says 'How high?' 

In the function shown above, the return type is void, and it takes two integers as parameters - x, and y. 
The function then draws three circles at the coordinates it was given. You could re-use this function many 
times in your code by simply typing drawThreeCircles and inputtting the coordinates for where you want 
it to be drawn. 

In this example, when you call the function and draw the circles, they will always be the same size. The 
only thing you can modify outside of the function is the location. 

It is important to note that the order that you input your parameters into your function is really crucial. 
In this example, the number you input for the x coordinate has to be first and the y second. 



A word about return type 

Most of the functions you build in Processing will be made to draw something on the screen, and as such 
will usually have a return type of void. This won't always be the case though. You might want to build a 
function that gives you back a number: 

void setup (){ 
size(400,400); 

} 

void draw(){ 

int answer = addThreeNumbers(17,20,15); 

print (answer) ; 

noLoopQ; 

} 

int addThreeNumbers(int nl, int n2, int n3){ 

int sum = (nl+n2+n3); 

return sum; 

} 

The keyword return tells this function to end and pass back the number to move on with your program. 
That number is stored in the variable 'answer'. The keyword print, tells processing to write something out 
to the screen, and will appear in the black part at the very bottom of your code (see image). This area is 
called the console, and is mostly used for testing programs. The keyword noLoop ends your program (to 
keep it from continually adding the numbers you gave it). 

For more on functions, check out these examples! 

http://processing.org/learning/basics/setupdraw.html 

http://processing.org/learning/basics/functions.html 
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Figure 3.2 



Review Questions 



Take a look at the following function and answer the questions below: 

int subtractTwoNumbers(int nl, int n2,){ 

return (nl-n2); 
} 



1. What is the return type of this function? 

2. What would be returned if the parameters were (10, 35)? 

3. Does this function print anything to the screen? 

4. What would happen if you input the following parameters - (3.14, 72)? 
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Chapter 4 
User Input 



Processing offers a few simple ways to get input from your mouse and keyboard. Lets look at the mouse 
first. 



4.1 Mouse Input 



The following code draws a circle at the location of the mouse. Each time through the draw function, the 
processing sketch will check where your mouse is and update the mouseX and mouseY variables. This 
creates a fun little drawing program. 

void setup (){ 

size(400,400); 

} 

void draw(){ 

ellipse ( mo useX, mouseY, 10,10); 

if ( mousePressed ) { 

background(O); 

} 
} 



4.2 Keyboard Input 



Getting input from the keyboard is a bit more involved, in that you usually want to check which key was 
pressed. Check out the following example: 

int x = 0; int y = 0; 

void setup(){ size(400,400);} 

void draw(){ background(O); rect(x,y,50,70);} 

void keyPressed(){ if (key == 'a') x = x - 5; if(key == 'd') x = x + 5;} 
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Chapter 5 
Loops 2 



The next type of loop we will explore is the for loop. This is a very commonly used loop, and a powerful 
tool. To understand how it works, lets revisit the while loop: 

int x = 0; 

while ( x < 100) { 

ellipse(x,50,10,10); 

x = x + 10; 

} 

Here is the same program, written with a for loop: 
for(int x = 0; x < 100; x = x + 10){ 

ellipse(x, 50, 10,10); 

} 

The important stuff all happens on the first line. To break it down a bit, here are the steps: 

• Create variable x and give it the value zero 

• As long as x is less than 100, keep going through this loop 

• Make x bigger by 10 each time 

Note that each statement is separated by semicolons - it is an easy error to use commas instead of the 
semicolons inside the for loop. 

5.1 Variable Shortcuts 

Often you will see programmers use some shorthand for the last segment of the loop that looks like one of 
the following: 

x += 10; 
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Figure 5.1 

This is simply programming shorthand for adding 10 to x. In the for loop, this happens each time, making 
a circle 10 pixels to the right the next iteration. 

x++: 

This is just shorthand for adding one to x. 

x— 

Subtracting one from x. 

x-= 9 

Subtracting . . . Ok - I think you get the picture here. . . This shorthand may be a bit confusing at first, 
but you will get used to this syntax quickly and it is really helpful. 



5.2 Looping the Loop 



Where for loops get really interesting is when you start to use them in tandem - looping the loop. Check 
out this example: 

void setup () { 

size(400, 400); 

smooth(); 
noStrokeQ; 



} 

void draw() { 

b ackgr ound (255); 

fill(100); 
www.ckl2.org 
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for(int x = 0; x <= width; x += 10) { 

for(int y = 0; y <= height; y += 10) { 
ellipse(x,y,8,8); 



} 
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Figure 5.2 



Ask yourself the following: 



How many circles are drawn on the screen here? 
What are the coordinates of the last one drawn? 
In what order are they drawn? Over and down, or down and over? 



5.3 Practice Programs 



1. Draw graph paper. Use one loop to draw lines going from top to bottom, and a separate loop to 
draw lines from left to right. 

2. Draw a grid of tiny circles or squares across the screen. This looks really cool if you leave lots of 
space in between the objects. 

3. Use a loop to draw a grid of objects whose fill color changes gradually. 
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Chapter 6 



Variables 2 



We stated earlier that variables have a name and a type. So far, we have primarily been using integers, 
by declaring our variables with the keyword int. Declaring a variable is literally marking off space in the 
computer's memory to hold something. It is saying, the value for the integer called x, is stored here. 

6.1 On variable names. . . 

You can call your variables whatever you like, with a few exceptions. 

• Variable names must start with a letter 

• You can't use spaces in a variable name. 

• Symbols are a no go. Don't use @, #, etc. 

• You can't use a keyword reserved for something else (like while, if, or for) 

In addition to these hard and fast rules, there are usually a few conventions good programmers follow that 
help your code make more sense at a glance. 

• Be descriptive! There is nothing worse than looking through your code trying to find what variable 
'j' does, when you could have simply called it what it does. 

• Use 'camel case'. This means to start with a lower case letter, and capitalize the first letter of any 
additional words, like this: 

— int mylnteger 

— int numberOfKittensInZoo 

There are several other variable types you will commonly use in your programming: 

• float 

• char 

• String 

• boolean 

To store a decimal number you need to declare your variable as a float. This is short for 'floating point 
number'. It can hold values like 3.14, or 2234.10. 

www.ckl2.org 16 



float cashOnHand = 30.24; 

The char type is for characters, declared like this. Note that the character value appears in single quotes. 

char myLetter = 'a'; 

Strings are words or groupings of letters (chars, in fact). Notice that while the other types are lower case, 
this one is not. More on that later. . . You can declare a string like this: 

String niyName = "Paul Way"; 

The boolean type may sound unfamiliar, but is really a simple idea. A boolean value is either true or false. 

boolean gamelsOver = false;boolean bestEpisodeEver = true; 

6.2 Follow up Questions: 

Which of these are valid variable names? Which are descriptive? 

int x 

float 3rdNumber 
float mylnteger 
char FirstLetter 
boolean isSwitchedOn 
int #ofTimesClassMet 
String sally's name 
float niyName 



6.3 Variable Scope 



As you write bigger and more complicated programs you will find that it becomes difficult to come up 
with descriptive names that don't overlap. For instance, if you have a lot of things bouncing around on 
the screen, using the variables x, and y in more than one place might come in handy. 

Luckily for us, are only visible within their variable scope. Here is what you need to know: 

• Declare a variable within one function and it can't be seen or used within another function. 

• If you need to be able to use a variable in many parts of your program, declare it at the top. 

As an example, the following program will not run - the computer doesn't know what the variables x and 
y are within the draw function. 
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Variable Scope 



void setup(){ 

size(4BB,488); 

int x = 3B; 

int y = 3B; 
} 

void draw(){ 

ellipse(x,y, 10.1B);] 
} 




Figure 6.1 
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Chapter 7 
Arrays 



7.1 The Need for an Array 

Variables are a powerful tool, but they get to be really tedious if you need to keep track of lots of things 
at the same time. Imagine you wanted to build a program with 100 moving objects on the screen. You 
could create variables as follows: 

int xl = 
int x2 = 
int x3 = 
int x4 = 

and so on. . . Your code would quickly be a big tangled mess, you would be retyping a ton of simple 
code, and it would be easy to make mistakes. Here instead, we use an array. An array is simply a group 
of variables that all have the same type. If a variable is like a cup, an array is a row of cups, all referenced 
by number. Here is what you need to know about arrays: 

• Arrays have a name and a type. Just like variables. 

• The individual items of an array are referenced by number. 

• Arrays start their numbers at zero 

• The last element of the array has an index of its length minus 1. 

• Once you create an array, it has a fixed size. You can't decide later you need more elements for 
your array. 

• You will nearly always use an array with a for loop that does something to each element in the 
array. 

Here is an example of a simple array: 

int[] myArray = new int[10]; 
myArray[0] = 127; 
myArrayfl] = 242; 
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In this example, the first line of code creates a blank array called 'myArray', that has 10 slots for integers. 
The next two lines drop numbers into the first and second spot, with indexes and 1. At this point in our 
code, the rest of the slots in the array are filled with nothing. This will often cause an error if you attempt 
to use a number from your array, where one has not yet been created. The last element of this array has 
an index of nine. For any array, the last element will have an index number of its length, minus one. You 
can write this in code as follows: 

myArray [myArray. length- 1]; // returns the value of the last element in the array 

For simple integers or floats, you can create an array and provide the values you need all in one line. This 
is a much quicker and simpler way to create arrays for which you have known values. 

int[] myArray = { 10, 30, 12, 10, 11, 14 }; 

7.2 A more useful example. . . 

Consider the following code. This example is more reflective of a common use for arrays. Note the use of 
the for loop to cycle through each element of the array, indicated by the integer i. 

float [] xCoord = new float[100]; 
float [] yCoord = new float[100]; 

void setup(){ 

size(400,400); 

for(int i = 0; i < 100; i++){ 

xCoordfi] = random(width); 

yCoordfi] = random(height); 

} 
} 

void draw(){ 

background(O); 

stroke(255); 

for(int i = 0; i < 100; i++){ 

point(xCoord[i], yCoord[i]); 

yCoord[i]++; 

} 
} 
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7.3 Follow up questions 



1. In the code above, what is the length of the xCoord array? 

2. What is the index of the last element of xCoord? 

3. Why can't you use an integer array for the coordinates in this example? 

4. If you decided to change this code to draw 500 points instead of 100, how many lines of code need 
to change? Can you think of a better way to design this, to reduce the number of changes the next 
time you modify the number of points drawn? 



7.4 Programming Exercises 



Modify the program above, so that the stars reappear at the top of the screen when they hit the 

bottom. 

Modify the program to implement your answer to number 4 above 
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Chapter 8 

Objects and Classes 



8.1 Objects and Classes 

We now begin our first dive into Object Oriented Programming. 

From here out we will often be dealing with objects rather than variables. The big idea to start with here 
is that objects have properties and methods. Think of a car. A car has a color, and a number of 
wheels - both properties. It can do things, like go in reverse, play music, and brake. These would be its 
methods. One way to distinguish between properties and methods is that properties are things your class 
has, and methods are things your class can do. For instance, a cow has a name, a weight, and a cowbell. 
These would be its properties. The cow can give milk, moo, and chew grass - all methods. 

Consider the program below, which is the beginning of Space Invaders - a classic game from the 1970's. 

Invader marvin; 

void setup (){ 

size(600,400); 

marvin = new Invader(10,50); 

} 

void draw(){ 

background(O); 
marvin . display ( ) ; 
marvin.move(); 

} 

In this example, marvin is an individual object created from the Invader class. Elsewhere in our code we 
have defined how marvin will look when he is displayed and how he will move around the screen. Each 
time we want to call one of marvin's methods, we use the 'dot operator' which is just a fancy way of 
saying we put a period after marvin's name and write out what we want him to do. 

All we are asking this program to do is to display an invader. As long as Processing knows what an Invader 
is, how to display it, and how to move it, you are all set. This is where your Class comes in. 
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8.2 A Class is a blueprint for an Object 

To put that another way, a class describes how you want your individual object to behave. Then you can 
instantiate, or build an individual object from your class. In fact, you can instantiate many objects from 
your class, each of which can have different properties. Just like a factory can build many different cars 
based on the same blueprint, you can create many objects from the same class. 

The specific instructions for what a car needs to have in order to be built is in a a special method called 
the constructor. The constructor always has the same name as the class, but may take any number of 
parameters. 

Below is the code for the Invader class. Click the button on the right hand side of processing to create a 
new Tab, and name it Invader. Then try out the code below. 

class Invader { 

//Variables 
int x; 
int y; 
int xmove; 

//Constructor 
Invader (int newX, int newY){ 
x = newX; 
y = newY; 
xmove = 2; 

1 
//Methods 

void move(){ 

x = x + xmove; 

if(x > width || x < 0){ 

xmove = xmove * -1; 

y = y + 10; 
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void display (){ 
611(0,255,0); 

noStroke(); 
ellipse(x, y, 20,20); 
611(255,0,0); 

ellipse(x-2, y-2, 3,3); 
ellipse(x+2, y-2, 3,3); 
stroke(0, 255,0); 
strokeWeight(2); 
line(x-6, y-10,x-16, y-10); 
line(x+6, y-10,x+16, y-10); 
line(x-8, y+14, x, y); 
line(x+8, y+14,x, y); 

} 

} 

In the code above here you may have noticed the properties, constructor and methods labeled in the 
comments. This is important terminology to grasp as we continue on. 



8.3 Review Questions 



1. Imagine you were creating an airplane class. What might the properties and methods of the airplane 
be? 

2. What things might you need to know in order to build an airplane? (What variables would need to 
be input into the constructor). 

3. The constructor for a class will always share its name with what? 

4. In the Invader example above, what are the properties (or instance variables) for the class? What 
are the methods? 
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Chapter 9 

The ArrayList (and Snake 

Game!) 

9.1 Introduction 

In this chapter we are going to build the snake game. In this classic game, you swallow bits of food, and 
your snake grows. If you run into your tail or a wall, game over. We could use an array to hold the 
objects for the snake's segments, but that would be problematic since the number always changes. Enter 
the ArrayList. 



ArrayList 

We have gotten pretty far up until now using arrays. They allow us to have lots of objects interacting on 
the screen all at once - we wouldn't be able to get far without them! 

That said, arrays have their limitations. Perhaps the biggest is that once they are created, they never 
change size. In lots of programs, you want to change the number of things you are dealing with - both 
adding to, and removing things from your array. In this chapter we will see how you can use an ArrayList 
to keep track of lists where you don't necessarily know how many things you are dealing with. 



Why use an ArrayList? 

An ArrayList is a Java Class. It is kind of like an array on steroids. It allows you to do everything that an 
array can, namely deal with lots of things of the same type, but it has a few more powerful features built 
in. We use an ArrayList in places we need an array of varying size, or when we want to use some other 
fancy methods that a simple array doesn't have. 

You should know now, that one of the downsides of using an ArrayList is memory. An ArrayList does take 
up a bit more system resources than an array. That said, once you start using it, and seeing how helpful 
the ArrayList is, you won't want to go back. 
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ArrayList vs. Array comparison 

Like I said earlier, the ArrayList can do everything an array can, but the syntax is a bit different. Here is 
the breakdown of some of the syntax differences: 

Table 9.1: 



Array 

int [] nums = new int[25]; 

int thirdValue = nums [3]; 

int arrayLength = nums. length; 



ArrayList 

ArrayList nums = new ArrayList (); 
int thirdValue = nums.get(3); 
int arrayListSize = nums. sizeQ; 



One other import thing to note, is that while an array has a set type, you could put anything into an 
ArrayList. While this is helpful, it leaves us with a dilemma - what if we reach into our ArrayList and pull 
out something we didn't expect? Like when we opened that box from the garage expecting to see our old 
college books and found a live opossum instead? Still having nightmares about that one. . . 

In order to avoid this problem we have to do one of two things: 

1. Limit our ArrayList to only one type. 

2. Add a cast each time we pull something out of our ArrayList. 

Limit our List 

The syntax to limit our list is easy, but perhaps different than anything you have seen before. The list 
below is limited to holding only objects from the 'Shape' class. Anything that extends Shape is ok, (like a 
circle) because a circle is a shape. 

ArrayList<Shape> myList = new ArrayList<Shape>(); 

Add a Cast 

Adding a cast is usually done when we are pulling items out of our ArrayList, most often in a for loop. 
The code below will walk through the entire ArrayList, cast the item to a Circle, and display the circle. 

for(int i = 0; i < myList. sizeQ; i++){ Circle cir = (Circle) myList. get (i); cir. display ();} 

What happens if what you pull out isn't a circle you ask? You will get an error. A big, nasty, Java Class 
Cast error actually. Ugly stuff. Your program will crash, and stop working. Using the instanceOf keyword, 
can help you avoid this - like in the code below: 

for(int i = 0; i < myList. sizeQ; i++){Object listltem = myList. get (i); if(listltem instanceOf Circle){ Circle 
cir = (Circle) myList. get(i); 

cir.displayQ;}} 



Snake Game Code 

Lets see an example of the ArrayList in use. Here is the code for the Snake Game, 
char direction; ArrayList snake = new ArrayList();SnakePart head;SnakeFood food; 
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void setup(){ frameRate(8); snake, add (new SnakePart(0,0)); food = new SnakeFood(); size(400,400); 
smooth();} 

voiddraw(){ background(lOO); head = (SnakePart)snake.get(O); moveBody(); moveHead(); checkGameOver(); 
//Check if the snake ate the food if(dist(head.x, head.y, food.x, food.y) < 5){ food = new SnakeFoodQ; 
snake. add(new SnakeP art (head. x, head.y)); } // Draw everything to the screen. food.display(); for(int i = 
0; i < snake. size(); i++){ SnakePart sp = (SnakePart)snake.get(i); sp.display(); }}voidkeyPressed(){ if(key 
== 'a' || key == 'A') direction = 'w'; if(key == 'd' || key == 'D') direction = 'e'; if(key == 'w' || key == 
'W') direction = 'n'; if(key == 's' || key == 'S') direction = 's';}void moveHead(){ switch(direction){ 
case 'n': head.y -= 20; break; case 's': head.y += 20; break; case 'e': head.x += 20; break; case 
'w': head.x -= 20; break; }}void moveBody(){ for(int i = snake. size()-l; i > 0; i-){ SnakePart front = 
(SnakePart)snake.get(i-l); SnakePart back = (SnakePart)snake.get(i); back.x = front. x; back.y = front. y; 
}}void checkGameOver(){ for(int i = 1; i < snake. sizeQ; i++){ SnakePart sp = (SnakePart)snake.get(i); 
if(dist(head.x, head.y, sp.x, sp.y) < 5){ println("GAME OVER!"); noLoop(); } } if(head.x < || head.x 
> width || head.y < || head.y > height){ println("GAME OVER!"); noLoop(); }}class SnakeFood{ 
int x,y; SnakeFood(){ x = int(random(width/20))*20; y = int(random(height/20))*20; } void display(){ 
fill(255, 100,100); rect(x,y,20,20); }} 

class SnakePart{ int x,y; SnakePart(int newX, int newY){ x = newX; y = newY; } void display(){ fill(255); 
ellipseMode(CORNER); ellipse(x,y,20,20); }} 
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Chapter 10 

Top Beginning Programming 
Mistakes 



10.1 Top Mistakes By Beginning Programmers 

The following are the types of mistakes I most often see from beginning programmers. They are often easy 
to make, but once you get in the habit of looking for them are also easy to spot. 

1. Problems with Brackets 

void draw(){ 

if(gameOver == false) { 

// A whole bunch of other code here. . . 

// and more code . . . 



else { 

//the game is over 

} 
// there needs to be another bracket here!!! 

2. Forgetting the semicolon 

gameOver = false // Not if you don't put a semicolon!!! 

3. Putting a semicolon after an if statement 
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if(something == true); // the computer will stop here!!! 
// anything after this will always happen 

4. Confusing ' = ' with '==' 

There is a big difference between 'set this variable to this value' and 'check to see if these are equal'. 
Just remember that == means 'Check to see if these two are the same' 
And that = means 'Set the thing on the left to the value of the right' 

if(something = true); // You just set 'something' to true!!! 

// anything after this will always happen 

5. Misplacing a ' or a ' 

This is kind of a confusing one, but it can really mess up your code. Since Processing thinks that anything 
after an apostrophe is a character, it ignores the rest of your code until it sees the end apostrophe. Check 
out the examples below: 

Right: char my Character = 'a' ; 

Wrong: char myCharacter = 'a ; 

This will break your program and it will hang when you try and run it. 

6. Declaring a variable twice 
int x = 42; 



void draw(){ 

int x = x + 5; // Note that x is declared twice! 

} 
7. Problems with variable scope 

void draw(){ 

int x = 32; 

ellipse(x, 200, 50,50); 

29 www.ckl2.org 



void mousePressed(){ 

x = x + 10; //fi This function can't see x! 

// Instead, try declaring x at the very beginning of your code. 

// That way everything in your program can see it. 

} 
8. Nesting if statements 

It pays to be careful about how you use if / else statements. In the example below, 'something totally 
different' will only happen if 'something' is true, but 'somethingElse' is not. The indentation here is off, 
but the brackets determine what will actually happen. 

if (something == true){ 

//do some stuff. . . 

if ( somethingElse == true ){ 

//do some more stuff 

} 
else { 

// do something totally different 
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Chapter 11 

Answers to Review Questions 



11.1 Section 2.2 - Answers 

1. What will the coordinates of the last ellipse be? 

The last ellipse will be drawn at (90,50). 

2. What will the value of x be when this code is done executing? 

Although the last ellipse will be at 90, 50, x gets incremented one more time, to end at a value of 100. 

3. What would happen if you left out the last line of code? 

This would cause an infinite loop. The value of x will never get bigger, and the program will never end. 
You would need to press the stop button on your processing sketch to shut down your program. 

11.2 Section 3.4 - Answers 

1. What is the return type of this function? 

Integer, or int. 

2. What would be returned if the parameters were (10, 35)? 
The number returned would be -25. 

3. Does this function print anything to the screen? 
No - It only calculates the value. 

4. What would happen if you input the following parameters - (3.14, 72)? 

This would not run. The input 3.14 is not an integer - it is a decimal number, or in Processing terms a 
float. 
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